body{
  width: 100%;
  height: 90vh;
}
.back-btn{
  background-color: rgba(0,0,0,0.6);
  left: 20px;
  top: 20px;
}
.left-layer{
  width: 360px;
  height: 100%;
}

.img-layer{
  width: 726px;
  height: 450px;
  box-shadow: 0 10px 30px #efefef;
  img{
    width: 726px;
    max-width: 726px;
  }
}

.img-layer-end{
  img{
    height: 100%;
  }
}
textarea{
  width: 100%;
  height: 160px;
}
.p{
  width: 726px;
  height: 100px;
  max-width: 726px;
  line-height: 100px;
  left: 0;
  bottom: 50%;
  margin-bottom: -50px;
  font-size: 32px;
  color: #323232;
  background-color: rgba(255,255,255,0.6);
}

 /* Switch开关样式 */
 /* 必须是input为 checkbox class 添加 switch 才能实现以下效果 */
 input[type='checkbox'].switch{
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  width: 40px;
  height: 20px;
  background: #ccc;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .3s, background-color .3s;
}

input[type='checkbox'].switch::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0, 0, 2px, #999;
  transition:.4s;
  top: 2px;
  position: absolute;
  left: 2px;
}

input[type='checkbox'].switch:checked {
  background: rgb(19, 206, 102);
}
/* 当input[type=checkbox]被选中时：伪元素显示下面样式 位置发生变化 */
input[type='checkbox'].switch:checked::after {
  content: '';
  position: absolute;
  left: 55%;
  top: 2px;
}